<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="1000" height="500"></canvas>
</body>
<script>
    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");

    //矩形 70*100
    function numRect(x, y) {
        this.x = x;//矩形的起点坐标
        this.y = y;//矩形的起点坐标
        this.r = 5;
        this.num = 0;//所显示的数
    }
    numRect.prototype.draw = function () {
        var arr = [];
        switch (this.num) {
        case 0:
            arr = [[2, 3, 4], [1, 2, 4, 5], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [1, 2, 4, 5], [2, 3, 4]];
            break;
        case 1:
            arr = [[3, 4], [1, 2, 3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [3, 4], [0, 1, 2, 3, 4, 5, 6]];
            break;
        case 2:
            arr = [[1, 2, 3, 4, 5], [0, 1, 5, 6], [5, 6], [4, 5], [3, 4], [2, 3], [1, 2], [0, 1], [0, 1, 5, 6], [0, 1, 2, 3, 4, 5, 6]];
            break;
        case 3:
            arr = [[0, 1, 2, 3, 4, 5, 6], [5, 6], [4, 5], [3, 4], [2, 3, 4], [4, 5], [5, 6], [5, 6], [0, 1, 5, 6], [1, 2, 3, 4, 5]];
            break;
        case 4:
            arr = [[4, 5], [3, 4, 5], [2, 3, 4, 5], [1, 2, 4, 5], [0, 1, 4, 5], [0, 1, 2, 3, 4, 5, 6], [4, 5], [4, 5], [4, 5], [3, 4, 5, 6]];
            break;
        case 5:
            arr = [[0, 1, 2, 3, 4, 5, 6], [0, 1], [0, 1], [0, 1, 2, 3, 4, 5], [5, 6], [5, 6], [5, 6], [5, 6], [0, 1, 5, 6], [1, 2, 3, 4, 5]];
            break;
        case 6:
            arr = [[3, 4], [2, 3], [1, 2], [0, 1], [0, 1, 3, 4, 5], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [1, 2, 3, 4, 5]];
            break;
        case 7:
            arr = [[0, 1, 2, 3, 4, 5, 6], [0, 1, 5, 6], [4, 5], [4, 5], [3, 4], [3, 4], [2, 3], [2, 3], [2, 3], [2, 3]];
            break;
        case 8:
            arr = [[1, 2, 3, 4, 5], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [1, 2, 3, 4, 5], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [1, 2, 3, 4, 5]];
            break;
        case 9:
            arr = [[1, 2, 3, 4, 5], [0, 1, 5, 6], [0, 1, 5, 6], [0, 1, 5, 6], [1, 2, 3, 5, 6], [5, 6], [5, 6], [4, 5], [3, 4], [2, 3]];
            break;
        default:
            break;
        }
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr[i].length; j++) {
                var px = this.x + arr[i][j] * 10 + 5;
                var py = this.y + i * 10 + 5;
                context.beginPath();
                context.arc(px, py, 5, 0, Math.PI * 2, false);
                context.fillStyle = "red";
                context.fill();
            }
        }
    }
    var hb = new numRect(100, 50);
    var hs = new numRect(180, 50);
    var mb = new numRect(300, 50);
    var ms = new numRect(380, 50);
    var sb = new numRect(500, 50);
    var ss = new numRect(580, 50);

    function create(obj) {
        hb.num=obj.hb;
        hb.draw();
        hs.num=obj.hs;
        hs.draw();
        mb.num=obj.mb;
        mb.draw();
        ms.num=obj.ms;
        ms.draw();
        sb.num=obj.sb;
        sb.draw();
        ss.num=obj.ss;
        ss.draw();
    }

    setInterval(function () {
        context.clearRect(0,0,1000,500);
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();

        var hb = parseInt(h / 10);
        var hs = h % 10;

        var mb = parseInt(m / 10);
        var ms = m % 10;

        var sb = parseInt(s / 10);
        var ss = s % 10;

        var obj = {
            hb: hb,
            hs: hs,
            mb: mb,
            ms: ms,
            sb: sb,
            ss: ss
        }
        create(obj);
    }, 30);
</script>

</html>